<!-- 我们的设备 -->

<template>
  <div>
    <div class="alignRight marginBottom">
      <BtnPrimary title="添加明细" :disabled="device_param.bindOrgan && !one.deptId" @click="toOpen" />
    </div>

    <WebTable :list="one.assetList || []" idKey="assetId" noPage>
      <RowText :label="`${CORE.MAP.ASSET}编号`" bind="assetCode" :width="160" />
      <RowText :label="`${CORE.MAP.ASSET}名称`" bind="assetName" />
      <RowTree :label="`所属${CORE.MAP.ORGAN}`" bind="assetDeptId" :dict="CORE.ORGAN.DICT" />
      <RowOperate :btns="['del']" :onDel="toDel" :width="100" />
    </WebTable>

    <WebModal path="device" :title="`选择${CORE.MAP.ASSET}`" :onSubmit="toSubmit" large>
      <DeviceSearch />
      <DeviceTable />
    </WebModal>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'OurDevice',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixWeb('device', 'device_')],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听弹窗可见
     */
    device_visible: {
      immediate: true,
      handler(visible) {
        visible && this.toReset()
      },
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 弹窗
     */
    toOpen() {
      this.device_startList(1)
      this.device_openEdit()
    },

    /**
     * 提交
     */
    toSubmit() {
      this.one.assetList = this.device_param.rowList.map((item) => ({
        assetId: item.id,
        assetName: item.assetName,
        assetCode: item.assetCode,
        assetDeptId: item.organizationId,
        assetDeptName: item.organizationName,
      }))
      this.device_closeModal()
    },

    /**
     * 重置
     */
    toReset() {
      const deviceList = this.one.assetList.map((item) => ({
        id: item.assetId,
        assetName: item.assetName,
        assetCode: item.assetCode,
        organizationId: item.assetDeptId,
        organizationName: item.assetDeptName,
      }))
      this.device_param.idList = deviceList.map((item) => item.id)
      this.device_param.rowList = deviceList
    },

    /**
     * 删除
     */
    toDel(row) {
      const assetList = this.one.assetList || []
      const index = assetList.findIndex((item) => item.assetId === row.assetId)
      index >= 0 && assetList.splice(index, 1)
    },
  },
}
</script>
